// JobAlumnuInfo.js
import React, { Fragment } from 'react'
import PropTypes from 'prop-types'
import { View, Text, Image, StyleSheet, ScrollView } from 'react-native'
import LinearGradient from 'react-native-linear-gradient'
import { ScaleS, ScaleT, ONE_PIXEL } from 'src/utils/ScreenUtil'
import CustomImage from '../../../../components/image/CustomImage'
import CustomButton from 'src/components/button/CustomButton'
import CustomBoxShadow from '../../../../components/boxshadow/CustomBoxShadow'
import { WIDTH } from '../../../../utils/ScreenUtil'
import DefaultImage from '../../../../components/image/DefaultImage'
import { defaultPortraitGray, getUserAvatorLocalB, getDistance, companyDefaultLogo } from '../../../../utils/ConfigUtil'

export default class JobBottom extends React.PureComponent {
  static propTypes = {
    data: PropTypes.object,
    chatClick: PropTypes.func,
    currentLocation: PropTypes.object
  }
  constructor(props) {
    super(props)
    this.state = {
      moreType: false
    }
  }
  more = () => {
    this.setState({
      moreType: !this.state.moreType
    })
  }
  render() {
    const { data, chatClick, currentLocation } = this.props
    const { companyBaseInfo } = data
    let { moreType } = this.state
    let companyInfo = companyBaseInfo.companyInfo
    return (
      <View style={styles.body}>
        <View style={styles.company}>
          <View style={styles.companylogoView}>
            <CustomImage style={styles.companylogoimg} source={data.companyInfo.companyLogo ? { uri: data.companyInfo.companyLogo } : companyDefaultLogo} />
          </View>
          <View>
            <Text style={styles.companyName}>{data.companyInfo.companyName || data.companyInfo.simpleName}</Text>
            <Text style={styles.companyInfo}>{data.companyBaseInfo.companyAbout} · {data.companyBaseInfo.companyFinance} · {data.companyBaseInfo.companyPerson}</Text>
          </View>
        </View>
        <View style={styles.briefIntroductionView}>
          {companyInfo.length < 48 ? <Text numberOfLines={moreType ? 2000 : 2} style={styles.companyInfoText}>{companyInfo}</Text> : <Text>{companyInfo.split('').filter((item, index) => index < (moreType ? 9999999999 : 47))}{!moreType && '...'}</Text>}
          {companyInfo.length > 83 && <CustomButton onPress={this.more} style={styles.moreView}>
            <Text style={styles.moreText}>{moreType ? '收起' : '全部'}</Text>
            <CustomImage source={require('@/imgC/userinfo/arrow_black_right.png')} />
          </CustomButton>}
        </View>
        <ScrollView scrollEnabled={false} showsHorizontalScrollIndicator={false} horizontal={true} contentContainerStyle={styles.member}>
          {
            (data.workMates || []).map((item, index) => {
              return <View style={styles.memberView} key={index}>
                <CustomImage style={styles.userPicture} source={{ uri: item.userAvator }} />
                <Text style={styles.userName}>{item.userName}</Text>
                <Text style={styles.userPosition}>{item.postion}</Text>
              </View>
            })
          }
        </ScrollView>
        {/* <View>
          <Text style={styles.producTitle}>旗下产品</Text>
          {
            [1, 2, 3, 4, 5].map((item, index) => {
              return <View style={styles.producListItem} key={index}>
                <CustomImage style={styles.produclogo} source={{ uri: 'https://imagesize.hrwork.com/sp/files/319bdaeb-3c90-446c-a268-25cb2304f7b3.png' }} />
                <View style={styles.producListItembody}>
                  <View style={styles.producListItemLeft}>
                    <Text style={styles.title}>VSCO:照片编辑和视频...</Text>
                    <Text style={styles.childTitle}>献给创业者，源自创作者</Text>
                  </View>
                  <View style={styles.producListItemRight}>
                    <CustomButton style={styles.see}>
                      <Text style={styles.seeText}>了解</Text>
                    </CustomButton>
                    <Text style={styles.seeSize}>1223人了解过</Text>
                  </View>
                </View>
              </View>
            })
          }
        </View> */}
        <View>
          <Text style={styles.producTitle}>公司地址</Text>
          <View style={styles.location}>
            <View style={styles.aaddressView}>
              <CustomImage style={styles.icon} source={require('@/imgC/company/company-homepage-icon.png')} />
              <Text style={styles.aaddress}>{companyBaseInfo.addressDetail + companyBaseInfo.roomInfo}</Text>
            </View>
            <Text style={styles.distance}>{getDistance(currentLocation.lat, currentLocation.lng, companyBaseInfo.lat, companyBaseInfo.lng)}</Text>
          </View>
        </View>
        {!!companyBaseInfo.companyPicUrl && <Text style={styles.producTitle}>公司相册</Text>}
        {!!companyBaseInfo.companyPicUrl && <ScrollView style={styles.photoAlbum} showsHorizontalScrollIndicator={false} horizontal={true}>
          {
            ((companyBaseInfo.companyPicUrl || '').split(',') || []).map((item, index) => {
              return <CustomImage key={index} style={styles.photoAlbumImg} source={{ uri: item }} />
            })
          }
        </ScrollView>}
        <Text style={styles.producTitle}>公司福利</Text>
        <ScrollView style={styles.photoAlbum} showsHorizontalScrollIndicator={false} horizontal={true}>
          {
            (JSON.parse(companyBaseInfo.benefits || '[]') || []).map((item, index) => {
              return <View style={styles.welfareView} key={index}>
                <Text>
                  {item[1]}
                </Text>
              </View>
            })
          }
        </ScrollView>
        <View>
          <View style={styles.commerceTop}>
            <Text style={styles.commerceTitle}>工商信息</Text>
            {/* <CustomButton style={styles.commerceButton}>
              <Text style={styles.commerceButtonText}>全部 <CustomImage source={require('@/imgC/userinfo/arrow_black_right.png')} /></Text>
            </CustomButton> */}
          </View>
          <View style={styles.commerceInfo}>
            <View style={styles.commerceInfoView}>
              <Text style={styles.commerceInfoTitle}>成立时间</Text>
              <Text style={styles.content}>{companyBaseInfo.registeredTime}</Text>
            </View>
            <View style={styles.commerceInfoViewcenter}>
              <Text style={styles.commerceInfoTitle}>注册资本</Text>
              <Text style={styles.content}>{companyBaseInfo.registeredMoney}</Text>
            </View>
            <View style={styles.commerceInfoView}>
              <Text style={styles.commerceInfoTitle}>法人代表</Text>
              <Text style={[styles.content, styles.legalPerson]}>{companyBaseInfo.legalPerson}</Text>
            </View>
          </View>
        </View>
      </View >
    )
  }
}

const styles = StyleSheet.create({
  company: {
    flexDirection: 'row',
    marginRight: ScaleS(20),
    marginLeft: ScaleS(20),
    alignItems: 'center'
  },
  body: {
    paddingBottom: ScaleS(30)
  },
  companylogoView: {
    borderRadius: ScaleS(10),
    marginRight: ScaleS(15)
  },
  companylogoimg: {
    borderRadius: ScaleS(10),
    width: ScaleS(49),
    height: ScaleS(49)
  },
  companyName: {
    width: ScaleS(278),
    color: 'rgba(0, 0, 0, 1)',
    fontSize: ScaleS(16),
    marginBottom: ScaleS(9),
    fontWeight: '500'
  },
  companyInfo: {
    color: 'rgba(204, 204, 204, 1)',
    fontSize: ScaleS(14)
  },
  companyReferral: {
    paddingHorizontal: ScaleS(20)
  },
  companyReferralText: {
    color: 'rgba(60, 60, 60, 1)',
    fontSize: ScaleS(14)
  },
  moreView: {
    width: ScaleS(40),
    height: ScaleS(28),
    position: 'absolute',
    flexDirection: 'row',
    right: ScaleS(20),
    bottom: ScaleS(-10),
    justifyContent: 'center',
    alignItems: 'center',
    overflow: 'hidden'
  },
  briefIntroductionView: {
    paddingHorizontal: ScaleS(20),
    marginTop: ScaleS(18)
  },
  briefIntroductionText: {
  },
  companyInfoText: {
    fontSize: ScaleS(14),
    fontWeight: '300',
    lineHeight: ScaleS(28),
    color: 'rgba(60, 60, 60, 1)'
  },
  moreText: {
    lineHeight: ScaleS(28),
    color: 'rgba(163, 163, 163, 1)'
  },
  member: {
    marginLeft: ScaleS(20),
    marginTop: ScaleS(28)
  },
  memberView: {
    marginRight: ScaleS(25),
    justifyContent: 'center'
  },
  userPicture: {
    resizeMode: 'cover',
    width: ScaleS(54),
    height: ScaleS(54),
    borderRadius: ScaleS(27)
  },
  userName: {
    fontSize: ScaleS(13),
    color: 'rgba(60, 60, 60, 1)',
    marginTop: ScaleS(16),
    textAlign: 'center'
  },
  userPosition: {
    fontSize: ScaleS(10),
    color: 'rgba(204, 204, 204, 1)',
    marginTop: ScaleS(7),
    textAlign: 'center'
  },
  producTitle: {
    marginBottom: ScaleS(30),
    fontSize: ScaleS(16),
    marginHorizontal: ScaleS(20),
    fontWeight: '500',
    color: 'rgba(60, 60, 60, 1)',
    marginTop: ScaleS(40)
  },
  producListItem: {
    marginHorizontal: ScaleS(20),
    marginBottom: ScaleS(17),
    flexDirection: 'row'
  },
  produclogo: {
    width: ScaleS(43),
    height: ScaleS(43),
    borderRadius: ScaleS(10),
    marginRight: ScaleS(14)
  },
  producListItembody: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingBottom: ScaleS(15),
    borderBottomWidth: ONE_PIXEL,
    borderColor: 'rgba(151, 151, 151, 1)'
  },
  producListItemLeft: {
  },
  producListItemRight: {
  },
  title: {
    fontSize: ScaleS(14),
    color: 'rgba(60, 60, 60, 1)',
    fontWeight: '400'
  },
  childTitle: {
    fontSize: ScaleS(11),
    color: 'rgba(204, 204, 204, 1)',
    fontWeight: '400',
    marginTop: ScaleS(7)
  },
  see: {
    paddingHorizontal: ScaleS(18),
    paddingTop: ScaleS(7),
    paddingBottom: ScaleS(7),
    borderWidth: ONE_PIXEL,
    borderColor: 'rgba(231, 231, 231, 1)',
    borderRadius: ScaleS(14),
    marginBottom: ScaleS(5)
  },
  seeText: {
    color: 'rgba(60, 60, 60, 1)',
    fontSize: ScaleS(12),
    fontWeight: '500'
  },
  seeSize: {
    fontSize: ScaleS(9),
    color: 'rgba(254, 221, 0, 1)',
    fontWeight: '400'
  },
  icon: {
    width: ScaleS(11),
    height: ScaleS(16),
    marginTop: ScaleS(5),
    marginRight: ScaleS(7)
  },
  location: {
    marginHorizontal: ScaleS(20),
    flexDirection: 'row',
    justifyContent: 'space-between'
  },
  aaddressView: {
    flexDirection: 'row'
  },
  aaddress: {
    width: ScaleS(224),
    lineHeight: ScaleS(22)
  },
  distance: {

  },
  photoAlbum: {
    marginLeft: ScaleS(20)
  },
  photoAlbumImg: {
    width: ScaleS(98),
    height: ScaleS(98),
    marginRight: ScaleS(4)
  },
  welfareView: {
    borderWidth: ONE_PIXEL,
    borderColor: 'rgba(231, 231, 231, 1)',
    paddingHorizontal: ScaleS(15),
    paddingTop: ScaleS(13),
    paddingBottom: ScaleS(13),
    borderRadius: ScaleS(18),
    marginRight: ScaleS(20)
  },
  welfareViewText: {
    color: 'rgba(60, 60, 60, 1)',
    fontSize: ScaleS(12)
  },
  commerceTop: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginHorizontal: ScaleS(20),
    marginBottom: ScaleS(25),
    marginTop: ScaleS(40)
  },
  commerceInfo: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginHorizontal: ScaleS(20)
  },
  commerceTitle: {
    fontSize: ScaleS(16),
    fontWeight: '500',
    color: 'rgba(60, 60, 60, 1)'
  },
  commerceButtonText: {
    color: 'rgba(163, 163, 163, 1)',
    justifyContent: 'center',
    fontSize: ScaleS(11)
  },
  commerceInfoTitle: {
    color: 'rgba(204, 204, 204, 1)',
    fontSize: ScaleS(11),
    marginBottom: ScaleS(12),
    fontWeight: '400'
  },
  content: {
    color: 'rgba(60, 60, 60, 1)',
    fontSize: ScaleS(14),
    fontWeight: '400',
    textAlign: 'right'
  },
  legalPerson: {
    width: ScaleS(44)
  },
  commerceInfoViewcenter: {
    marginHorizontal: ScaleS(10)
  }
})
